<template>
  <view class="container">
	<view class="fix_menu">
		<view class="item" v-for="(item, index) in tab" :key="index" @click="get_list(item.type)">
			<text :class="type == item.type ? 'active' : ''" >{{item.title}} </text>
		</view>
	</view>
	
    <view v-if="list.length" class="coupon-list">
      <view class="coupon-item" v-for="(item, index) in list" :key="index">
        <view class="item-wrapper" :class="type == 1 ? 'color-' +  COMMON.color[index % COMMON.color.length] : 'gray'">
          <view class="coupon-type">满减券</view>
          <view class="tip">
            <view>
              <text class="money">￥{{item.reduce_price}}</text>
            </view>
            <text class="pay-line">满{{item.min_price}}元可用</text>
          </view>
          <view class="split-line"></view>
          <view class="content">
            <view class="title">{{item.name}}</view>
            <view class="bottom">
              <view class="time">
               <text v-if="item.expire_type == 20">{{ item.start_time }}~{{ item.end_time }}</text>
               <text v-else>领取{{item.expire_day}}天内有效</text>
              </view>
			  <view class="receive" v-if="type == 1" @click="toGoodsDetail(item.goods_id)"><text>去使用</text></view> 
              <view class="receive" v-if="type == 2"><text>已使用</text></view>
			  <view class="receive" v-if="type == 3"><text>已过期</text></view>
            </view>
          </view>
        </view>
      </view>
    </view>
	<view  class="u-empty" v-else>
		<u-empty text="暂无数据" icon="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250311/0057423001741660320.png"></u-empty>
	</view>
  </view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow	} from '@dcloudio/uni-app';
	import { COMMON	} from "@/utils/commom.js"
	import { useAuthStore } from '@/stores/user.js';
	import { user_coupon_list } from "@/api/coupon.js"
	
	const list = ref([]);
	const tab = ref([
		{ title: '未使用', type: 1 },
		{ title: '已使用', type: 2 },
		{ title: '已过期', type: 3 }
	])
	const type = ref(1);
	
	const authStore = useAuthStore();
	
	onShow(() => {
		authStore.initialize();
		if(!authStore.isLogin){
			COMMON.toLogin();
			return
		}
		get_list(type.value);
	})
	
	//获取列表
	function get_list(t){
		type.value = t;
		user_coupon_list(t).then(res => {
			let data = res.data;
			list.value = data;
		})
	}
</script>

<style lang="scss" scoped>
@import "@/static/css/coupon.scss";

.coupon-list{
	padding-top: 130rpx;
}
.fix_menu{
	width: 100%;
	text-align: center;
	overflow: hidden;
	border-bottom: 1px solid #eee;
	background-color: #fff;
	position: fixed;
	padding: 30rpx 0 0;
	top: 0;
	left: 0;
	z-index: 100;
	.item{
		float: left;
		width: 33.333%;
		color: #333;
		text{
			border-bottom: 2px solid transparent;
			display: table;
			padding-bottom: 10rpx;
			margin: auto;
		}
		.active{
			color: #f00;
			border-bottom: 2px solid #F00;
		}
	}
}
</style>